const app = getApp()
const api = require('../../utils/api')
Page({
  data: {
    canvas: '',
    contractid:'',
    ctx: '',
    pr:0,
    width: 0,
    height: 0,
    first:true,
  },
  start(e) {
    if(this.data.first){
      this.clearClick();
      this.setData({first:false})
    }
    this.data.ctx.beginPath(); // 开始创建一个路径，如果不调用该方法，最后无法清除画布
    this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) // 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
  },
  move(e) {
    this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y) // 增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
    this.data.ctx.stroke()
  },
  error: function (e) {
    console.log("画布触摸错误" + e);
  },
  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
    this.setData({
        contractid:options.id
    })
    this.getSystemInfo()
    this.createCanvas()
  },
  /**
   * 初始化
   */
  createCanvas() {
    const pr = this.data.pr; // 像素比
    const query = wx.createSelectorQuery();
    query.select('#canvas').fields({ node: true, size: true }).exec((res) => {
      const canvas = res[0].node;
      const ctx = canvas.getContext('2d');
      canvas.width = this.data.width*pr; // 画布宽度
      canvas.height = this.data.height*pr; // 画布高度
      ctx.scale(pr,pr); // 缩放比
      ctx.lineGap = 'round';
      ctx.lineJoin = 'round';
      ctx.lineWidth = 4; // 字体粗细
      ctx.font = '40px Arial'; // 字体大小，
      ctx.fillStyle = '#ecf0ef'; // 填充颜色
      ctx.fillText('签名区', res[0].width / 2 - 60, res[0].height / 2)
      this.setData({ ctx, canvas })
    })
  },
  handleBack(){
    wx.navigateBack({
      delta: 0,
    })
  },
  // 获取系统信息
  getSystemInfo() {
    let that = this;
    wx.getSystemInfo({
      success(res) {
        that.setData({
          pr:res.pixelRatio,
          width: res.windowWidth,
          height: res.windowHeight - 75,
        })
      }
    })
  },
  clearClick: function () {
    //清除画布
    this.data.ctx.clearRect(0, 0, this.data.width, this.data.height);
  },
  //保存图片
  saveClick: function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.data.width,
      height: this.data.height,
      destWidth:this.data.width*this.data.pr,
      destHeight: this.data.height*this.data.pr,
      canvasId: 'canvas',
      canvas: this.data.canvas,
      fileType: 'png',
      success(res) {
        console.log(res,'aaa')
        var nums  =0;
        var  getFiles= ()=> {
            wx.getFileInfo({
              filePath: res.tempFilePath,
              success(files){
                  if(files.errMsg == "getFileInfo:ok"){
                      wx.uploadFile({
                        filePath:res.tempFilePath,
                        name: 'name',
                        url: 'https://www.rangcn.press/updateimg',
                        complete: function(files){
                            if( nums <5){
                                nums+=1;
                                if(files.errMsg="uploadFile:ok"){
                                    wx.showToast({
                                      title: '上传成功',
                                    })
                                    
                                }else{
                                    getFiles();
                                }
                            }
                        },
                        success(res){
                          console.log('res,',res)
                          let url = JSON.parse(res.data).data[0]
                          console.log(url,'url')                         
                        }
                      })
                  }
              }
            })
        }
        getFiles()
        // wx.saveImageToPhotosAlbum({
        //   filePath: res.tempFilePath,
        //   success(res) {
        //     wx.showToast({
        //       title: '保存成功',
        //       icon: 'success'
        //     })
        //   }
        // })
      }
    })
  }
})